<template>
  <div>
    <el-upload
      action="#"
      :file-list="fileList"
      list-type="picture-card"
      :limit="limit"
      :class="{ disabled: disabled }"
      :on-remove="Onremove"
      :on-preview="Onpreview"
      :http-request="httpRequest"
      :before-upload="BeforeUpload"
      :value="value"
    >
      上传
    </el-upload>
    <el-dialog
      title="图片预览"
      :visible.sync="isShow"
      width="40%"
      append-to-body
      @close="imgUrl = ''"
    >
      <img class="img" :src="imgUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { uploadImgApi } from '@/api/upload'
export default {
  props: {
    limit: {
      type: Number,
      default: 1
    },
    maxSize: {
      type: Number,
      default: 3
    },
    // 文件格式
    typrArr: {
      type: Array,
      default: () => [
        'image/png',
        'image/jpeg',
        'image/jpg',
        'image/webp',
        'image/gif'
      ]
    },
    // 接收回显的图片内容
    value: {
      type: Array,
      default: () => []
    },
    webUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: [],
      imgUrl: '', // 预览图片地址
      isShow: false // 弹框设置
    }
  },
  computed: {
    disabled() {
      return this.fileList.length >= this.limit
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler() {
        this.fileList = this.value.length
          ? this.value.map((item) => {
            return {
              url: this.addWebUlr(item),
              saveUrl: item,
              uploaded: true
            }
          }) : []
      }
    }
  },
  methods: {
    addWebUlr(url) {
      return this.webUrl ? this.webUrl + '/' + url : url
    },
    Onremove(file) {
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
      const newUrlArr = this.fileList.filter(item => item.uploaded).map(item => item.saveUrl)
      console.log(newUrlArr)
      this.$emit('input', newUrlArr)
    },
    Onpreview(file) {
      this.isShow = true
      this.imgUrl = file.url
    },
    BeforeUpload(file) {
      const { size, type } = file
      if (size > 1024 * 1024 * this.maxSize) {
        this.$message.warning(`图片体积不能超过${this.maxSize}M`)
        return false
      }
      if (!this.typrArr.includes(type)) {
        this.$message.warning(`图片格式不符合要求`)
        return false
      }
    },
    async httpRequest(data) {
      const file = data.file
      const fd = new FormData()
      fd.append('file', file)
      const res = await uploadImgApi(fd)
      console.log(res)
      this.fileList.push({
        url: this.addWebUlr(res.savePath),
        saveUrl: res.savePath,
        uploaded: true
      })
      const newUrlArr = this.fileList.filter(item => item.uploaded).map(item => item.saveUrl)
      console.log(newUrlArr)
      this.$emit('input', newUrlArr)
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep .el-upload {
    display: none;
  }
}
.img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 400px;
}
</style>
